import React from 'react'
import {Route , Link ,Redirect,Switch } from "react-router-dom"
import Dj from './Dj'
import Cctv from './Cctv'
import ConfigRouter from '../../components/configRouter'
//嵌套路由  处理一级动态路径   let {match:{url}} = this.props
     class Discover extends React.Component{
            render(){
                console.log("Discover",this.props);
                //从this.props.match.url中获取当前这个组件区配成功的路径
                let {match:{url},routes} = this.props
                return(
                    
                 <fieldset>
                     <legend>Discover</legend>
                     <h1>惊奇发现</h1>
                     <ul>
                        <li>
                        <Link to= {`${url}/Dj`}>狂暴歌曲</Link>
                        </li>
                        <li>
                        <Link to= {`${url}/Cctv`}>电视台频道</Link>
                        </li>
                     </ul>
                    

                        {/* //声明式路由 */}
                     {/* <Route path= {`${url}/Dj`} component={Dj}></Route>
                    <Route path= {`${url}/Cctv`} component={Cctv}></Route> */}


                        {/* 路由重定向 */}
                      {/* <Redirect from={url} to={`${url}/Dj`} />  */}

                    {/* config模式路由 */}
                    <Switch>
                        {
                            routes.map(route =><ConfigRouter {...route} key={route.path} />)
                        }
                    </Switch>

                 </fieldset>
            )
        }
     }
     export default Discover